Using Background Images in an Absolute Layout Container
Description
Using the absolute layout container in conjunction with images presents some powerful options for structuring the user interface of an application.
This guide describes how to add images to the absolute layout container; in addition to data controls. Adding background images to an absolute layout container is also covered in this video. You can add background images that appear like a form, such as a 1040 tax return form or a pdf.
Create the Absolute Container
In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [DropdownBox] option to add a dropdown box control to the component. Give the textbox the name and label of 'species'.
Highlight the dropdown box in the controls tree. Scroll down the properties list on the right to the 'DropDownBox Properties' section. Click the [...] button next to the 'Choices' property.
Select the 'Static' option from the 'Choices are:' list and add the following satic choices to the dropdown.
Baetis tricaudatus Callibaetis fluctuans Epeorus pluralis Epeorus vitreus Ephemerella invaria Ephemerella needhami Ephemerella subvaria Hydropsyche alternans Isonychia bicolor Leptophlebia cupida Maccaffertium ithaca Paraleptophlebia adoptiva Paraleptophlebia mollis Pteronarcys dorsata Siplonurus occidentalis Taeniopteryx nivalis
In the 'Data Controls' menu click on the [TextBox] option to add a textbox control. Name and label the textbox 'Location'.
Add two more textbox controls to the component. Name and label these controls 'Time' and 'Temperature'.
Highlight all of the textbox controls. Open the 'Containers' menu and click on the [Container] option.
From the Container Type list select the 'AbsoluteLayout' option and click 'OK'
Define a Background Image for the AbsoluteLayout Container.
Have an image to use as a background, like the one below:
The areas that appear as whitespace on this image are where new controls will be placed. Make sure to make these spaces large enough for the control. If a dropdown box control is made too small, for example, then it might not display properly when the component is run.Highlight the opening 'AbsoluteLayout' container tag, [AbsoluteLayout: ABSOLUTELAYOUT_1].
In the properties list on the right check the 'Has background image' checkbox in the 'Container Begin Properties' section.
Click the [...] button next to the 'Background image' property.
Check the 'Image in Web Project or Style' radio button and click the 'Select' button.
Choose the 'Select from Web Project Folder' option.
Click the 'Add Image to Project' button.
Click the up arrow next to the 'Source File' textbox.
Navigate to the image file that you defined. Click 'Open', then 'OK', 'OK', and 'OK' again.
Place The Absolute Layout Controls over the Image.
Highlight the opening tag for the AbsoluteLayout container, "[AbsoluteLayout: ABSOLUTELAYOUT_1]".
In the properties list on the right, in the 'Container Begin Properties' section, click the [...] button next to the 'Absolute positions for controls' property. The 'Set Absolute Position and Size' editor will open.
In the middle panel of the 'Set Absolute Position and Size' editor find the dotted rectangle that represents the size of the layout. Drag the grey triangle in the lower right-hand corner of the dotted rectangle until the layout size is the same as the image size.
In the fields list in the top left corner highlight the 'species' field.
Place the mouse cursor inside the layout where the species box is defined. Click and hold down the left-hand mouse button and drag out the 'species' dropdown-box control.
Release the mouse button to add the control. Adjust the position of the 'species' dropdown control's border as needed.
Highlight the Location textbox control and drag out the control inside the absolute layout.
Add the 'Time' and 'Temperature' textbox controls to the layout. Click OK to close the editor.
Run the component in Live Preview. You should see the controls displayed inside the absolute layout component.
The dropdown:
